﻿/**
 * 	floater 1.0 - jQuery plugin
 *	written by Yu Fangjun	
 *
 *	Copyright (c) 2011 XTJY (http://www.tuan2.com)
 *
 *	Built for Tuan2
 *
 */

/**
 *	浮动提示层
 *	markup example for $("#ID").floater();
 *
 *	{Boolean} @closer 是否有关闭按钮
 *	{String} @direction 在对象的方位,如：{"top","right","bottom","left"}
 *	{String} @property 获取内容的标签属性名
 *	{String} @backgroundColor 背景颜色
 *	{String} @borderColor 边框颜色
 *	{String} @fontColor 字体颜色
 *	{Array} @padding 内边距,如：[上,右,下,左]
 */
(function($) {

	$.fn.floater = function(options){
 
		var defaults = {
			closer:true,
			direction:"top",
			property:"st",
			zIndex:0,
			backgroundColor:"#fffbe9",
			borderColor:'#ffcfb5',
			fontColor:'#666',
			padding:[5,30,5,10]
		};
		
		var options = jQuery.extend(defaults, options);
		
		var boxHtml = "<div class='floater_box' style='position:absolute;text-align:left;line-height:16px;'>" +
									"	<div style='position:relative;border:1px solid "+options.borderColor+";background:"+options.backgroundColor+";padding:"+options.padding[0]+"px "+options.padding[1]+"px "+options.padding[2]+"px "+options.padding[3]+"px;'>" +
									"		<tt class='arrowBehind' style='position:absolute;font-family:simsun;font-size:14px;color:"+options.borderColor+";'>◆</tt>" +
									"		<tt class='arrowFront' style='position:absolute;font-family:simsun;font-size:14px;color:"+options.backgroundColor+";'>◆</tt>";
										
		if(options.closer == true){
			boxHtml += "<a class='close_floater' style='position:absolute;right:5px;cursor:pointer;display:inline-block;font-size:16px;text-decoration:none;font-family:simhei;background:none;margin:0;font-weight:bold;color:#666;text-indent:0;width:10px;padding-left:2px;height:12px;line-height:8px;'>x</a>";
		}
		boxHtml += "<div class='floater_content' style='white-space:nowrap;color:"+options.fontColor+";font-family:Simsun;font-size:12px;font-weight:normal;'></div>" +
							 "	</div>" +
							 "</div>";
		if(options.closer == true){
			this.each(function(i){
				$(this).css({position:"relative","z-index":options.zIndex,cursor:"default"}).prepend(boxHtml);
				$(this).find(".floater_content").html($(this).attr(options.property));
				setArrowPosition($(this));
				
				//设置关闭按钮的top位置、样式
				if($(this).children(".floater_box").height() < 26){
					var topOffSet = ($(this).children(".floater_box").height()-16)/2;
					$(this).children(".floater_box").find("a.close_floater").css({opacity:0.7,right:topOffSet,top:topOffSet});
				}else{
					$(this).children(".floater_box").find("a.close_floater").css({opacity:0.7,top:"5px"});
				}
				$(this).children(".floater_box").find("a.close_floater").bind("click",function(){
					$(this).parents(".floater_box").remove();
				}).bind("mouseenter mouseleave",function(){
					if($(this).hasClass("hover")){
						$(this).css({color:"#666"}).removeClass("hover");
					}else{
						$(this).css({color:"#333"}).addClass("hover");
					}
				});
			});
		}else{
			this.live("mouseenter mouseleave",function(){
				var thisObj = $(this);
				thisObj.css({position:"relative","z-index":options.zIndex,cursor:"default"});
				if(thisObj.find(".floater_box").html()==null){
					thisObj.prepend(boxHtml);
					thisObj.find(".floater_content").html(thisObj.attr(options.property));
					setArrowPosition(thisObj);
				}else{
					thisObj.find(".floater_box").remove();
				}
				return false;
			});
		}
		
		//箭头位置设置
		function setArrowPosition(thisObj){
			switch(options.direction){
				case "top" :
					var boxLeft = (thisObj.find(".floater_box").width()-thisObj.width())>0 ? -(thisObj.find(".floater_box").width()-thisObj.width())/2 : (-thisObj.find(".floater_box").width()+thisObj.width())/2;
					var boxTop = -(thisObj.find(".floater_box").height()+8);
					thisObj.find(".arrowBehind").css({bottom:-16/2-1,right:(thisObj.find(".floater_box").width()-14)/2});
					thisObj.find(".arrowFront").css({bottom:-16/2,right:(thisObj.find(".floater_box").width()-14)/2});
					thisObj.find(".floater_box").css({left:boxLeft,top:boxTop});
					break;
				case "right" :
					var boxLeft = thisObj.width()+7;
					var boxTop = -(thisObj.find(".floater_box").height()-thisObj.height())/2;
					thisObj.find(".arrowBehind").css({bottom:(thisObj.find(".floater_box").height()-16)/2,right:thisObj.find(".floater_box").width()-16/2});
					thisObj.find(".arrowFront").css({bottom:(thisObj.find(".floater_box").height()-16)/2,right:thisObj.find(".floater_box").width()-16/2-1});
					thisObj.find(".floater_box").css({left:boxLeft,top:boxTop});
					break;
				case "bottom" :
					var boxLeft = (thisObj.find(".floater_box").width()-thisObj.width())>0 ? -(thisObj.find(".floater_box").width()-thisObj.width())/2 : (-thisObj.find(".floater_box").width()+thisObj.width())/2;
					var boxTop = thisObj.height()+8;
					thisObj.find(".arrowBehind").css({top:-16/2,right:(thisObj.find(".floater_box").width()-14)/2});
					thisObj.find(".arrowFront").css({top:-(16/2-1),right:(thisObj.find(".floater_box").width()-14)/2});
					thisObj.find(".floater_box").css({left:boxLeft,top:boxTop});
					break;
				case "left" :
					var boxLeft= -thisObj.find(".floater_box").width()-7;
					var boxTop = -(thisObj.find(".floater_box").height()-thisObj.height())/2;
					thisObj.find(".arrowBehind").css({bottom:(thisObj.find(".floater_box").height()-16)/2,right:-14/2-1});
					thisObj.find(".arrowFront").css({bottom:(thisObj.find(".floater_box").height()-16)/2,right:-14/2});
					thisObj.find(".floater_box").css({left:boxLeft,top:boxTop});
					break;
			}
		}
	};
})(jQuery);